<template>
  <div class="root" @click="handleAdd">
    <draggable class="list" v-model="todoList" v-bind="dragOptions" @start="drag = true" @end="drag = false">
      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
        <div ref="todoItem" class="item" v-for="(item, index) in todoList" :key="'todo' + index" @click.stop="handleEdit(index)" @dblclick.stop="handleDone(index, $event)">
          <p v-if="index !== activeIndex">{{ index + 1 }}.{{ item.content }}</p>
          <div class="edit" v-else>
            <span class="serial">{{ index + 1 }}.</span>
            <input type="text" v-model="item.content" v-focus @keyup.enter="handleConfirm" @keyup.esc="handleEsc(index)" />
            <i class="iconfont icon-seleted" @click.stop="handleConfirm"></i>
            <i class="iconfont icon-close" @click.stop="handleClear(index)"></i>
          </div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import CursorSpecialEffects from '../utils/fireworks'
import { ipcRenderer } from 'electron'
import DB from '@/utils/db'
import { getNowDate, getNowDateTime } from '@/utils/common'
export default {
  components: {
    draggable
  },
  data() {
    return {
      todoList: [],
      drag: false,
      activeIndex: -1,
      tempItem: null,
      timer: null
    }
  },
  created() {
    ipcRenderer.invoke('getDataPath').then((storePath) => {
      DB.initDB(storePath)
      this.getTodoList()
    })
  },
  methods: {
    getTodoList() {
      const list = DB.get('todoList')

      if (list.length === 0) {
        // default data
        this.todoList = [
          {
            todoDate: getNowDate(),
            todoDateTime: getNowDateTime(),
            content: '“单击”下方空出，创建一个 Todo'
          },
          {
            todoDate: getNowDate(),
            todoDateTime: getNowDateTime(),
            content: '“单击” Todo，可进行更改或删除'
          },
          {
            todoDate: getNowDate(),
            todoDateTime: getNowDateTime(),
            content: '“双击” Todo，表示已完成'
          },
          {
            todoDate: getNowDate(),
            todoDateTime: getNowDateTime(),
            content: '“长按” Todo，可进行拖拽排序'
          },
          {
            todoDate: getNowDate(),
            todoDateTime: getNowDateTime(),
            content: '【重要】感谢您的使用！！！'
          }
        ]
        return
      }

      this.todoList = list
    },
    handleAdd() {
      if (this.activeIndex !== -1) {
        this.handleConfirm()
      }
      this.todoList.push({ todoDate: getNowDate(), todoDateTime: getNowDateTime(), content: '' })
      this.activeIndex = this.todoList.length - 1
    },
    handleEdit(theIndex) {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // filter empty data
        if (this.activeIndex !== -1) {
          this.handleConfirm()
        }
        // save init value
        this.tempItem = Object.assign({}, this.todoList[theIndex])
        this.activeIndex = theIndex
      }, 300)
    },
    handleConfirm() {
      this.tempItem = ''
      // remove empty item
      this.todoList = this.todoList.filter((item) => item.content)
      this.activeIndex = -1

      DB.set('todoList', this.todoList)
    },
    handleClear(theIndex) {
      if (!this.todoList[theIndex].content) {
        this.handleConfirm()
        return
      }
      this.todoList[theIndex].content = ''
      this.$refs.todoItem[theIndex].querySelector('input').focus()
    },
    handleDone(theIndex, event) {
      clearTimeout(this.timer)
      CursorSpecialEffects.handleMouseDown(event)

      DB.insert('doneList', Object.assign({ doneDate: getNowDate(), doneDateTime: getNowDateTime() }, this.todoList[theIndex]))
      this.todoList.splice(theIndex, 1)
      this.handleConfirm()
      DB.set('todoList', this.todoList)
    },
    // restore original content
    handleEsc(theIndex) {
      this.$set(this.todoList, theIndex, this.tempItem)
      this.handleConfirm()
      this.tempItem = ''
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.root {
  min-height: 100%;
  padding: 10px 0;
  .list {
    padding: 8px;
    .item {
      height: 28px;
      p {
        width: 100%;
        height: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        // user-select: none;
      }
      .edit {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        .serial {
          font-size: 12px;
          color: #999;
        }
        input {
          flex: 1;
          height: 100%;
          border: none;
          outline: none; // 去除获得焦点时的默认轮廓线
          background-color: transparent;
          font-size: 16px;
        }
        .iconfont {
          margin-right: 10px;
        }
      }
    }
  }
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
}
</style>
